<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 需求 描述一只猫的名字，颜色，叫声，技能

    // 面向过程:
    var name = "Tom";
    var color = "black";
    function call() {
        console.log("喵喵");
    }
    function skill() {
        console.log("捉老鼠");
    }

    // 面向对象: 将需求抽象为对象 => 分析对象的特征和行为
    // 最简单的面向对象: 字面量对象 (把面向过程中的变量和函数整合到一起作为对象的属性和方法)  => 缺点: 一个对象只能描述一只猫,代码不能复用
    // var Tom = {
    //     name: "Tom",
    //     color: "black",
    //     species: "Cat",
    //     call: function () {
    //         console.log("喵喵");
    //     },
    //     skill() {
    //         console.log("捉老鼠");
    //     }
    // }

    // var Kitty = {
    //     name: "Kitty",
    //     color: "pink",
    //     species: "Cat",
    //     call: function () {
    //         console.log("喵喵");
    //     },
    //     skill() {
    //         console.log("捉老鼠");
    //     }
    // }

    // var LanMao = {
    //     name: "LanMao",
    //     color: "blue",
    //     species: "Cat",
    //     call: function () {
    //         console.log("喵喵");
    //     },
    //     skill() {
    //         console.log("捉老鼠");
    //     }
    // }

    // 构造函数通过new 关键词 创建的对象  => 实例化对象

    // 函数封装: 
    // 优点: 可以根据传入的参数快速创建对象
    // 缺点:
    // (1) 通过函数cat创建的对象和函数没有任何关系  (不是构造函数)
    // var arr = new Array([1, 2, 3]);     // arr是构造函数Array创建的实例化对象 
    // console.log(arr instanceof Array);  //  判断arr是否是构造函数Array创建的实例化对象(暂定)

    // var obj = {}; // new Object();
    // console.log(obj instanceof Object); //true

    // var p = new Promise(function () { });
    // console.log(p instanceof Promise); // true

    // (2) 公有的属性和方法 重复创建 占内存


    function cat(name, color) {
        var obj = { // new Object();
            name: name,
            color: color,
            species: "Cat",
            call: function () {
                console.log("喵喵");
            },
            skill() {
                console.log("捉老鼠");
            }
        }
        return obj;
    }

    var Tom = cat("Tom", "black");
    console.log(Tom, Tom instanceof cat, Tom instanceof Object);

    var Kitty = cat("Kitty", "pink");
    console.log(Kitty);

    var LanMao = cat("LanMao", "blue");
    console.log(LanMao);
</script>

</html>